<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <%=style :content => 'css/list.css' %>
    <%=javascript 'js/jquery.mini.js' %>
    <%=javascript 'js/jquery.jeditable.mini.js' %>
<script type="text/javascript">
$(document).ready(function() {
  var set_editable = function(obj) {
    obj.editable("<%=action_to :action => 'save_item'%>", {
      cancel: 'Cancel',
      submit: 'Save',
      tooltip: 'クリックで編集開始'
    });
  };
  set_editable($('.edit'))
  $('#new-item-button').click(function() {
    var parts = [];
    parts.push("<div class='todo-item' id='item-new'>");
    parts.push("<div class='edit todo-body' id='todo-item-new'>ここに入力</div>");
    parts.push("</div>");
    $(this).after(parts.join(''));
    set_editable($('div#item-new').find('.edit'));
  });
  $('#new-item-button').hover(
    function() {
      $(this).css('cursor', 'pointer');
    },
    function() {
      $(this).css('cursor', 'auto');
    }
  );
  // TODO 検索結果の取得は $.post にするか
});
</script>
   <title>ToDo リスト - mini ToDo - </title>
  </head>
  <body>
    <form method="POST" action="<%=action_to :action => 'search'%>">
      &gt;&gt; <input type="text" size="40" name="search-query" /><input type="submit" value="検索" />
    </form>
    <div><span id="new-item-button">追加<span></div>
    <%
    context.todo_list.each do |item|
    %>
    <div class="todo-item" id="item-<%=item.id%>">
      <div class="edit todo-body" id="<%=item.id%>"><%=item.body%></div>
    </div>
    <%
    end
    %>
  </body>
</html>

